<template>
  <div class="managerApplyDetail">
    <el-form label-width="160px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="姓名:">{{managerApply.name}}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="手机号:">{{managerApply.phone}}</el-form-item>
        </el-col>
      </el-row>

     <el-row>
        <el-col :span="18">
          <el-form-item label="所在地区:">{{managerApply.address}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="所在小区:">{{managerApply.community}}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="小区户数:">{{managerApply.households}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="22">
          <el-form-item label="备注:">{{managerApply.remarks}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="头像:">
            <img v-if="managerApply.imgUrl" :src="managerApply.imgUrl" class="cover">
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item>
            <el-button type="primary" @click="handleCreate" v-if="managerApply.status==0">审核创建</el-button>
            <el-button @click="goBack()">返 回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
 
  </div>
</template>

<script>
import api from "@/api/managerApply";

const SUCCESS = 0;
const LIMIT = 10;
export default {
  data() {
    return {
      id: null,
      managerApply: {}
    };
  },
  created() {
    this.id = this.$route.query.id;
    if (this.id) {
      this._getDetail();
    } else {
      this.$message({
        type: "warning",
        message: "获取参数失败,请返回列表页重试!"
      });
    }
  },
  methods: {
    _getDetail() {
      api.getDetail(this.id).then(response => {
        if (response.code == SUCCESS) {
          this.managerApply = response.data.managerApply;
        }
      });
    },
    goBack() {
      this.$router.back();
    },
    handleCreate() {
      this.$router.push({
        path: "/manager/edit",
        query: { managerApplyId: this.id }
      });
    }
  }
};
</script>

<style lang="less">
.managerApplyDetail {
  padding-bottom: 100px;
  .cover {
    width: 150px;
    height: 150px;
    border-radius: 4px;
    border: 1px dashed #d9d9d9;
  }

  .el-button {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
}
</style>